<template>
  <div id="workbench">
    <div :style="benchStyle">
      <transition name="fade" mode="out-in">
        <router-view :key="$route.fullPath"></router-view>
      </transition>
      <BenchMenu :menuList="menuList"></BenchMenu>
    </div>
  </div>
</template>

<script>
import BenchMenu from '@/components/bench-menu'
import Vue from 'vue'
Vue.prototype.$bus = new Vue()
export default {
  components: {
    BenchMenu
  },
  data () {
    return {
      expand: true,
      menuList: [
            {
                title: this.$t('m_screen'),
                icon: 'ios-albums',
                name: '1',
                children: [
                    { title: this.$t('m_create'), path: '/viewConfigIndex/boardList?isCreate=true', name: '1-1' },
                    { title: this.$t('m_list'), path: '/viewConfigIndex/boardList', name: '1-2' }
                ]
            },
            {
                title: this.$t('m_chart_library'),
                icon: 'md-pulse',
                name: '2',
                children: [
                    { title: this.$t('m_list'), path: '/viewConfigIndex/allChartList', name: '2-1' }
                ]
            }
        ]
    }
  },
  computed: {
    benchStyle () {
      return {
        paddingLeft: this.expand ? '140px' : '0px'
      }
    }
  },
  mounted () {
    if (this.$eventBusP) {
      this.$eventBusP.$on('expand-menu', val => {
        this.expand = val
      })
    } else {
      this.$bus.$on('expand-menu', val => {
        this.expand = val
      })
    }
  },
  methods: {}
}
</script>
